<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <div class="tit">
        <h2>基础信息</h2>
        <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
      </div>
      <el-form label-width="200px" v-if="dataInfo">
        <el-row>
          <el-form-item label="产品编号:">
            <span>{{ dataInfo.goodsCode }}</span>
          </el-form-item>
          <el-form-item label="产品图片:">
            <div class="img-video">
              <template title="点击可预览" v-for="item in dataInfo.businessServerImages">
                <el-image fit="cover" v-if="item.type == 1" :src="item.url" alt="" :preview-src-list="images"></el-image>
                <video v-else="item.type==2" :src="item.url" controls>
                  <h2>我们很抱歉，您的浏览器<strong>不支持video标签</strong></h2>
                  <a href="https://www.google.cn/chrome/">点击这里下载浏览器</a>
                </video>
              </template>
            </div>
          </el-form-item>
          <el-form-item label="产品分类:">
            <span>{{ dataInfo.serverClassifyName }}-{{ dataInfo.thirdClassifyName }}</span>
          </el-form-item>
          <el-form-item label="规格:">
            <span>{{ dataInfo.variantState == 1 ? '单品' : '多规格' }}</span>
          </el-form-item>
          <el-form-item label="上门/到店/远程/紧急通知">
            <div>
              <el-tag size="mini" effect="dark" v-if="dataInfo.visitFlag == 1">
                上门
              </el-tag>
              <el-tag size="mini" effect="dark" v-if="dataInfo.shopFlag == 1" type="success">
                到店
              </el-tag>
              <div></div>
              <el-tag size="mini" effect="dark" v-if="dataInfo.remoteFlag == 1" type="warning">
                远程
              </el-tag>
              <el-tag size="mini" effect="dark" v-if="dataInfo.fastFlag == 1" type="danger">
                急
              </el-tag>
            </div>
          </el-form-item>
          <el-form-item label="商户确认方式:">
            <span>{{ $Filters.formatBusinessConfirmWay(dataInfo.businessConfirmWay) }}</span>
          </el-form-item>
          <el-form-item label="是否需配送费:">
            <span>{{ dataInfo.deliveryFlag == 0 ? '否' : '是' }}</span>
          </el-form-item>
          <el-form-item label="产品名称:">
            <span>{{ dataInfo.name }}</span>
          </el-form-item>
          <el-form-item label="产品简介:">
            <span>{{ dataInfo.introduce }}</span>
          </el-form-item>
          <el-form-item label="产品描述:">
            <span>{{ dataInfo.describes }}</span>
          </el-form-item>
          <el-form-item label="商户/部门:">
            <span>{{ dataInfo.businessName }}-{{ departNames }}</span>
          </el-form-item>
          <el-form-item label="总库存">
            <span>{{ dataInfo.stock }}</span>
          </el-form-item>
          <el-form-item label="平台原价:">
            <span>{{ dataInfo.price }}</span>
          </el-form-item>
          <el-form-item label="平台售价:">
            <span>{{ dataInfo.salePrice }}</span>
          </el-form-item>
          <el-form-item label="商户原价:">
            <span>{{ dataInfo.marketPrice }}</span>
          </el-form-item>
          <el-form-item label="商户折扣比例:">
            <span>{{ dataInfo.discount }}%</span>
          </el-form-item>
          <el-form-item label="商户分类:">
            <span class="business-classify_name" v-html="businessClassifies"></span>
          </el-form-item>
          <el-form-item label="成本价:">
            <span>{{ dataInfo.costPrice }}</span>
          </el-form-item>
          <el-form-item label="包装费:">
            <span>{{ dataInfo.packageFee }}</span>
          </el-form-item>
          <el-form-item label="包装费计算方式:">
            <span >{{ dataInfo.packageFlag == 1 ? '独立包装费' : '合并包装费' }}</span>
          </el-form-item>
          <el-form-item label="备注:">
            <span>{{ dataInfo.remark }}</span>
          </el-form-item>
          <el-form-item label="创建时间:">
            <span>{{ dataInfo.createDate }}</span>
          </el-form-item>
          <el-form-item label="修改时间:">
            <span>{{ dataInfo.modifyDate }}</span>
          </el-form-item>

        </el-row>
      </el-form>
      <div class="tit">
        <h2>组合产品</h2>
      </div>
      <el-table border :data="serverCombos" style="width: 1000px;">
        <el-table-column type="index" label="序号" align="center" width="80px">
        </el-table-column>
        <el-table-column prop="comboName" label="组合名" align="center">
        </el-table-column>
        <el-table-column label="产品/库存" align="center">
          <template slot-scope="scope">
            <span v-for="(item, index) in scope.row.list">{{ item.relationServerName + "/" + item.stock }}
              <template v-if="index != scope.row.list.length - 1">、</template>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="chooseNums" label="选择个数" align="center">
        </el-table-column>

      </el-table>
      <div class="tit">
        <h2>可售时间</h2>
      </div>
      <el-table :data="goodsHours" style="width:fit-content;max-width:fit-content;margin-bottom:10px">
        <el-table-column type="index" label="序号" align="center" width="100px">
        </el-table-column>
        <el-table-column prop="beginHours" label="开始时间" align="center" width="200">
        </el-table-column>
        <el-table-column prop="endHours" label="结束时间" align="center" width="200">
        </el-table-column>
        <el-table-column prop="estimateTime" label="最快到达时间" align="center" width="200">
          <template slot-scope="scope">
            {{ scope.row.estimateTime }}{{ formatTimeUnit(scope.row.timeUnit) }}
          </template>
        </el-table-column>
        <el-table-column prop="deliveryTime" label="可送时间段" align="center" width="200">
        </el-table-column>
        <el-table-column prop="businessRemindTime" label="商户提醒时间(分)" align="center" width="140">
        </el-table-column>
        <el-table-column prop="waiterRemindTime" label="服务员提醒时间(分)" align="center" width="140">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import BusinessServerApi from '@/api/goods/businessServer';
import BusinessDepartApi from "@/api/business/depart"
export default {
  data() {
    return {
      dataInfo: {},
      serverClassifyName: "",
      serverCombos: [],
      departNames: "",
      goodsHours: [],
    };
  },
  computed: {
    images() {
      if (this.dataInfo.businessServerImages) {
        return this.dataInfo.businessServerImages.filter(item => item.type == 1).map(item => item.url)
      } else {
        return []
      }
    },
    businessClassifies(){
      return this.dataInfo.businessClassifies&&this.dataInfo.businessClassifies.reduce((a,b)=>a.name+","+b.name)
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      BusinessServerApi.getBusinessServerInfo({ id: this.$route.query.id }).then(res => {
        this.dataInfo = res.data
        this.goodsHours = res.data.goodsHours
        this.serverCombos = res.data.serverCombos
        this.getDepartList()
      })
    },
    getDepartList() {
      BusinessDepartApi.listMangerTree().then(res => {
        this.departList = res.data
        this.getDepartNames()
      })
    },
    getDepartNames() {
      let arr = []
      if (this.dataInfo.thirdDepartId) {
        arr = this.$Utils.filterTreeToArr(this.departList, { departId: this.dataInfo.thirdDepartId }, 'departId')
      } else if (this.dataInfo.secondDepartId) {
        arr = this.$Utils.filterTreeToArr(this.departList, { departId: this.dataInfo.secondDepartId }, 'departId')
      } else if (this.dataInfo.firstDepartId) {
        arr = this.$Utils.filterTreeToArr(this.departList, { departId: this.dataInfo.firstDepartId }, 'departId')
      } else if (this.dataInfo.departId) {
        arr = this.$Utils.filterTreeToArr(this.departList, { departId: this.dataInfo.departId }, 'departId')
      }
      this.departNames = arr.map(item => item.departName).join("-")
    },
    formatTimeUnit(cell) {
      if (cell == 1) {
        return "分钟"
      } else if (cell == 2) {
        return "时"
      } else {
        return ""
      }
    },
    formatSaleStates(val) {
      switch (val) {
        case 1:
          return ""
        case 2:
          return "success"
        case 3:
          return "info"
        case 4:
          return "danger"
      }
    },
    formatSaleState(val) {
      switch (val) {
        case 1:
          return "待上架"
        case 2:
          return "上架"
        case 3:
          return "下架"
        case 4:
          return "当日售罄"

      }
    },
    returnList() {
      this.$store.dispatch('delView', this.$route);
      this.$router.back()
    }
  },

}

</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
<style lang="scss" scoped>
.img-video {
  width: 550px;
  display: flex;
  flex-wrap: wrap;

  .el-image {
    width: 150px;
    height: 150px;
    vertical-align: bottom;
    margin: 0 20px 20px 0;
    flex-shrink: 0;
  }

  video {
    width: 150px;
    height: 150px;
    margin: 0 20px 20px 0;
    flex-shrink: 0;
  }
}
.business-classify_name{
    ::v-deep p{
      display: inline;
      margin: 0;
       img{
        vertical-align: middle;
        height: 16px;
        width: auto;
      }
    }
  }
</style>
